<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
     default-active="1-4-1"
            :collapse="isCollapse"
            background-color="#324157"
            text-color="#bfcbd9"
            active-text-color="#20a0ff"
            unique-opened
            :router='true'
    >
      <template v-for="item in slideList">
        <template v-if="item.org">
          <el-submenu :key="item.index" :index="item.index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.text }}</span>
            </template>
            
            <template :index="items.index1" v-for="items in item.org">
              <el-submenu index="items.index1" v-if="items.mens" :key="items.index1">
                <template slot="title">
                  <span slot="title">{{ items.text1 }}</span>
                </template>
                <el-menu-item
                  :index="it.index2"
                  v-for="it in items.mens"
                  :key="it.index2"
                  >{{ it.text2 }}</el-menu-item
                >
              </el-submenu>
              <el-menu-item v-else :key="items.index1" :index="items.index1">
                <i :class="items.icon"></i>{{ items.text1 }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :key="item.index" :index="item.index">
            <i :class="item.icon"></i><span slot="title">{{ item.text }}</span></el-menu-item
          >
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import bus from '../bus/bus'
export default {
  components:{
  },
  data() {
    return {
      isCollapse:true,
      slideList: [
        // { text: this.$t('message.hello'), icon: "el-icon-s-home", index: "home_page1" },
        { text: '系统首页', icon: "el-icon-s-home", index: "home_page1" },
        { text: "基础表格", icon: "el-icon-s-data", index: "home_page2" },
        { text: "Table选项卡", icon: "el-icon-s-order", index: "home_page3" },
        {
          text: "表单相关",
          icon: "el-icon-s-cooperation",
          index: "4",
          org: [
            { text1: "基本表单", index1: "home_form" },
            {
              text1: "三级表单",
              index1: "4-2",
              mens: [
                { text2: "富文本编辑器", index2: "quill" },
                { text2: "markdown编辑器", index2: "mavonEditor" },
              ],
            },
            { text1: "文件上传", index1: "uploader" },
          ],
        },
        { text: "自定义", icon: "el-icon-s-platform", index: "home_step" },
        { text: "echars图表", icon: "el-icon-s-promotion", index: "echars" },
        {
          text: "拖拽组件",
          icon: "el-icon-s-management",
          index: "7",
          org: [
            { text1: "拽拉列表", index1: "darg_list" },
            { text1: "拽拉弹框", index1: "dialog" },
          ],
        },
        { text: "国际化功能", icon: "el-icon-s-opportunity", index: "langs" },
        { text: "错误处理", icon: "el-icon-s-grid", index: "error" },
        { text: "支持作者", icon: "el-icon-lx-redpacket_fill", index: "autorun" },
      ],
    };
  },
  methods:{
      onRoutes(){},
  },
  created(){
    bus.$on('isShowIcon',res=>{
      console.log(res,'slidebar')
      this.isCollapse=res
    })
  }
};
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  top: 70px;
  left: 0;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar{
    width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
}
.sidebar > ul{
  height: 100%;
}
</style>